* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.container {
  width: 100vw;
  height: 100vh;
  // background-image: url("../assets/images/home.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  .contain-box {
    position: relative;
    height: inherit;
    background: rgba(#000, 0.5);
    backdrop-filter: blur(10px);
    iframe {
      position: absolute;
      top: 20%;
      left: 50%;
      width: 100%;
      height: 50%;
      transform: translateX(-50%);
    }
    .main {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      perspective: 650px;
      .images {
        width: 100%;
        transform-style: preserve-3d;
        animation: roll 50s infinite linear;

        @keyframes roll {
          0% {
            transform: rotateX(-10deg) rotateY(0deg);
          }
          100% {
            transform: rotateX(-10deg) rotateY(360deg);
          }
        }
        &:hover {
          animation-play-state: paused;
        }
        li {
          position: absolute;
          float: right;
          width: 100%;
          transform: rotateY(
              calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)
            )
            translateZ(400px);
          img {
            width: 100%;
            height: 150px;
            border-radius: 16px;
            cursor: pointer;
            filter: grayscale(0.8);
            transition: 0.3s linear;
            &:hover {
              filter: grayscale(0);
              transform: scale(1.2);
            }
          }
        }
      }
    }
  }
  footer {
    position: absolute;
    bottom: 10%;
    right: 0;
    //width: 500px;
    h1,
    h3 {
      color: aliceblue;
    }
    h1 {
      font-size: 40px;
      padding-bottom: 10px;
    }

    .desc {
      display: flex;
      flex-wrap: wrap;
      //width: 200px;
    }
  }
}
